<template>
	<view>
		<view class="my-header">
			<view class="upper">我的上级：12345678</view>
			<view class="bg">
				<view class="userinfo">
					<view class="face">
						<image src="../../static/images/logo.png"></image>
					</view>
					<view class="info">
						<view class="username">{{userinfo.tel}}</view>
						<view class="integral">邀请码:{{userinfo.inviteCode}}<text class="copy" @tap="copyLink">复制</text></view>
					</view>
				</view>
			</view>
			<!-- <view class="setting"><image src="../../static/images/icon/weibo.png"></image></view> -->
		</view>
		<view class="orders">
			<view class="box">
				<view class="money-box">
					<view class="money-data">余额：<span>0</span>元</view>
					<view>
						<u-button class="money-btn" :ripple="true"><i class="iconfont icon-qianbao"></i>钱包</u-button>
					</view>
				</view>
				<view class="u-flex-1">
					<view>
						<view class="u-steps" style="flex-direction: row;">
							<view v-for="(item,i) in numList" :key="item.id" class="u-steps__item u-steps__item--row">
								<view class="u-steps__item__dot"  :style="{'background-color':(item.id == current_step ?'rgb(41, 121, 255)':'rgb(144, 147, 153)')}">

								</view>
								<text class="u-line-1 u-steps__item__text--row">
									{{item.name}}
								</text>
								<view v-if="i!=numList.length-1" class="u-steps__item__line u-steps__item__line--dot">
									<view class="u-line" style="margin: 0px; border-bottom: 1px solid rgb(144, 147, 153); width: 100%; border-top-color: rgb(144, 147, 153); border-right-color: rgb(144, 147, 153); border-left-color: rgb(144, 147, 153);">
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- <u-steps active-color="#409aea" :list="numList" :current="current_step"></u-steps> -->
				</view>
			</view>
		</view>
		<view class="report">
			<view class="box">
				<view class="table">
					<!--<view class="title">收益报表</view>-->
					<view class="u-flex">
						<view class="item line right">
							<view class="cell">
								<view class="text">可用余额</view>
								<view class="number">
									<u-count-to :end-val="item.balance" separator="," :decimals="2"></u-count-to>
								</view>
							</view>
							<view class="cell">
								<view class="text">本周收益</view>
								<view class="number">
									<u-count-to :end-val="item.bzsy" separator="," :decimals="2"></u-count-to>
								</view>
							</view>
							<view class="cell">
								<view class="text">总收益</view>
								<view class="number">
									<u-count-to :end-val="item.zsy" separator="," :decimals="2"></u-count-to>
								</view>
							</view>
						</view>
						<view class="item line right">
							<view class="cell">
								<view class="text">昨日收益</view>
								<view class="number">
									<u-count-to :end-val="item.zrsy" separator="," :decimals="2"></u-count-to>
								</view>
							</view>
							<view class="cell">
								<view class="text">本月收益</view>
								<view class="number">
									<u-count-to :end-val="item.bysy" separator="," :decimals="2"></u-count-to>
								</view>
							</view>
							<view class="cell">
								<view class="text">今日已做任务</view>
								<view class="number">{{item.t||0}}</view>
							</view>
						</view>
						<view class="item">
							<view class="cell">
								<view class="text">今日收益</view>
								<view class="number">
									<u-count-to :end-val="item.jrsy" separator="," :decimals="2"></u-count-to>
								</view>
							</view>
							<view class="cell">
								<view class="text">上月收益</view>
								<view class="number">
									<u-count-to :end-val="item.sysy" separator="," :decimals="2"></u-count-to>
								</view>
							</view>
							<view class="cell">
								<view class="text">今日剩余次数</view>
								<view class="number">{{item.time||0}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--九宫格-->
		<u-grid :col="3" class="my-grid">
			<u-grid-item @click="navTo('/pages/user/user')">
				<view class="iconfont icon-gerenxinxi1"></view>
				<view class="grid-text">个人信息</view>
			</u-grid-item>
			<u-grid-item @click="navTo('/pages/user/share')">
				<view class="iconfont icon-yaoqinghaoyou1"></view>
				<view class="grid-text">邀请好友</view>
			</u-grid-item>
			<u-grid-item @click="navTo('/pages/user/team')">
				<view class="iconfont icon-icon-test"></view>
				<view class="grid-text">我的团队</view>
			</u-grid-item>
			<u-grid-item @click="navTo('/pages/wallet/wallet')">
				<view class="iconfont icon-qianbao"></view>
				<view class="grid-text">我的钱包</view>
			</u-grid-item>
			<u-grid-item @click="navTo('/pages/wallet/detail')">
				<view class="iconfont icon-shouyimingxi1"></view>
				<view class="grid-text">收益明细</view>
			</u-grid-item>
			<u-grid-item @click="navTo('/pages/helps/helps')">
				<view class="iconfont icon-bangzhuzhongxin1"></view>
				<view class="grid-text">帮助中心</view>
			</u-grid-item>
			<u-grid-item @click="show=true">
				<view class="iconfont icon-bangzhuzhongxin"></view>
				<view class="grid-text">联系客服</view>
			</u-grid-item>
		</u-grid>
		<!--<view class="history-section icon">-->
			<!--<list-cell icon="icon-gerenxinxi" iconColor="#55befd" @eventClick="navTo('/pages/user/user')" title="个人信息"></list-cell>-->
			<!--<list-cell icon="icon-tuandui" iconColor="#e07472" @eventClick="navTo('/pages/user/team')" title="我的团队"></list-cell>-->
			<!--<list-cell icon="icon-qianbao" iconColor="#ffaa09" title="我的钱包" @eventClick="navTo('/pages/wallet/wallet')"></list-cell>-->
			<!--<list-cell icon="icon-shouyimingxi" iconColor="#2fc4fe" @eventClick="navTo('/pages/wallet/detail')" title="收益明细"></list-cell>-->
			<!--<list-cell icon="icon-yaoqing" iconColor="#9789f7" title="邀请好友" @eventClick="navTo('/pages/user/share')"></list-cell>-->
			<!--&lt;!&ndash; <list-cell icon="icon-chongzhijilu1" iconColor="#ef8c5b" @eventClick="navTo('/pages/about/about')" title="充值记录"></list-cell> &ndash;&gt;-->
			<!--<list-cell icon="icon-bangzhu" iconColor="#54b4ef" title="帮助中心" @eventClick="navTo('/pages/helps/helps')"></list-cell>-->
			<!--<list-cell icon="icon-yaoqingma1" iconColor="#1951fb" title="联系客服" @eventClick="show=true"></list-cell>-->
		<!--</view>-->
		<u-modal v-model="show" title="联系客服" :content="content"></u-modal>
	</view>
</template>
<script>
	import listCell from '@/components/mix-list-cell';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			listCell
		},
		data() {
			return {
				current_step: 0,
				item: {
					task: []
				},
				userinfo: {},
				numList: [],
				show: false,
				content: ""
			};
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onLoad() {
			this.$request.post("/getKf", {
					dataType: 'json',
					responseType: 'text'
				})
				.then(res => {
					this.content = res.data.data;
				})
			//加载
			// this.init();
		},
		onShow() {
			this.loadData();
			this.$request.post("/member/getData", {
					dataType: 'json',
					responseType: 'text'
				})
				.then(res => {
					this.numList = res.data.json.status;
					this.userinfo = res.data.json.user;
					this.current_step = this.userinfo.status;
				})
		},
		methods: {
			async loadData() {
				await this.$request.post("/index/getData", {
						dataType: 'json',
						responseType: 'text'
					})
					.then(res => {
						this.item = res.data.json;
						this.swiperList = res.data.json.lbt;
						this.elements = res.data.json.types;
						let content = res.data.json.notice.content;
						if (content) {
							content = content.replace(/\n/g, "");
						}
						this.notice.push(content);
					})
					.catch(error => {});
			},
			init() {
				//用户信息
				this.userinfo = {
					face: '../../static/images/icon/douyin.png',
					username: "VIP会员10240",
					integral: "1435"
				}
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			copyLink() {
				uni.setClipboardData({
					data: this.userinfo.inviteCode,
					success: () => {
						// this.$api.msg("已复制到剪贴板");
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f8fb
	}

	.my-header {
		background-color: #fbc855;
		background-image: linear-gradient(141deg,#f9a551 0%,#fabc54 55%,#fbc855 75%);
		width:100%;
		height:60vw;
		padding: 20rpx;

		&.status {
			padding-top: var(--status-bar-height);
		}

		.upper{
			color: #fff;
			text-align: center;
			font-size: 28rpx;
			padding: 0 0 20rpx;
		}
		.userinfo {
			z-index: 10;
			width: 100%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #ffffff6e;
			padding: 40rpx;
			border-top-left-radius: 12rpx;
			border-top-right-radius: 12rpx;

			.face {
				flex-shrink: 0;
				width: 18vw;
				height: 18vw;
				padding: 5px;

				image {
					border-radius: 50%;
					width: 100%;
					height: 100%;
					background: #fff;
				}
			}

			.info {
				display: flex;
				flex-flow: wrap;
				padding-left: 2%;

				.username {
					width: 100%;
					color: #fff;
					font-size: 40upx
				}

				.integral {
					display: flex;
					align-items: center;
					padding: 0 20upx;
					height: 40upx;
					color: #fff;
					background-color: rgba(0, 0, 0, 0.1);
					border-radius: 20upx;
					font-size: 24upx
				}
			}
		}
	}

	.bg {
		width: 100%;
		height: 100%;
		/*background-image: url(../../static/images/lang.jpg);*/
		background-size: cover;
		background-position: center;
	}

	.orders {
		width: 100%;
		display: flex;
		align-items: flex-start;
		border-radius: 0 0 100% 100%;
		margin: -170rpx auto 0;

		.box {
			width: 95%;
			padding: 0 1%;
			margin: 0 auto;
			min-height: 30vw;
			background-color: #fefefe;
			border-radius: 18upx;
			box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
			/*display: flex;*/
			/*align-items: center;*/
			/*justify-content: center;*/

			.label {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-flow: wrap;
				width: 100%;
				height: 16vw;
				color: #666666;
				font-size: 26upx;

				.icon {
					position: relative;
					width: 7vw;
					height: 7vw;
					margin: 0 1vw;

					.badge {
						position: absolute;
						width: 4vw;
						height: 4vw;
						background-color: #ec6d2c;
						top: -1vw;
						right: -1vw;
						border-radius: 100%;
						font-size: 20upx;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						z-index: 10;
					}

					image {
						width: 7vw;
						height: 7vw;
						z-index: 9;
					}
				}
			}
		}
		.money-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 20rpx 30rpx;
			.money-data{
				color: #010000;
				font-size: 38rpx;
				font-weight: bold;
				span{
					color: #ffaa09;
					font-size: 42rpx;
					padding-right: 8rpx;
				}
			}
			.money-btn{
				background-color: #ffc25b;
				color: #fff;
				font-size: 36rpx;
				font-weight: bold;
				/*height: 68rpx;*/
				/*line-height: 68rpx;*/
				i{
					padding-right: 5px;
				}
			}
		}
	}

	.history-section {
		margin: 0 30rpx;
		padding: 30rpx 0 0;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		background: #fff;
		border-radius: 10rpx;

		.sec-header {
			display: flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40rpx;
			margin-left: 30rpx;
		}
	}

	.copy {
		background-color: #000;
		color: #FFFFFF;
		font-size: 24rpx;
		border-radius: 40rpx;
		margin-left: 20rpx;
		padding: 6rpx 30rpx;
		cursor: pointer;
		position: relative;
		z-index: 999;
	}

	.report .box {
		background-color: #FFFFFF;
		margin: 0 30rpx;
		margin-top: 30rpx;
		border-radius: 10rpx;
	}

	.report .table {
		padding: 20rpx 0;
	}

	.report .title {
		text-align: center;
		line-height: 60rpx;
		font-size: 30rpx;
	}

	.report .item {
		padding: 0 30rpx;
		flex: 1;
	}

	.report .line {
		position: relative;
	}

	.report .line::after {
		content: " ";
		position: absolute;
		pointer-events: none;
		box-sizing: border-box;
		z-index: 2;
		background-color: #eee;
	}

	.report .top::after {
		top: 0;
		width: 60%;
		height: 1px;
		left: 20%;
	}

	.report .right::after {
		height: 60%;
		width: 1px;
		right: 0;
		top: 20%;
	}

	.report .left::after {
		height: 60%;
		width: 1px;
		left: 0;
		top: 20%;
	}

	.report .cell {
		margin-top: 20rpx;
		line-height: 50rpx;
		text-align: center;

		.text {
			font-size: 26rpx;
			color: #838184;
		}

		.number, .u-count-num{
			font-size: 34rpx !important;
			color: #f7a126 !important;
			font-weight: bold !important;
		}
	}

	.u-steps {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		margin: 0 -50rpx;

		.u-steps__item--row {
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-webkit-flex-direction: column;
			flex-direction: column;
		}

		.u-steps__item {
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			text-align: center;
			position: relative;
			min-width: 48px;
			font-size: 12px;
			color: #8799a3;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-webkit-flex-direction: column;
			flex-direction: column;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
		}

		.u-steps__item__dot {
			width: 9px;
			height: 9px;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			border-radius: 50%;
		}

		.u-steps__item--row .u-steps__item__line--dot {
			top: calc(9px / 2);
		}

		.u-steps__item--row .u-steps__item__line {
			position: absolute;
			z-index: 0;
			left: 75%;
			width: 50%;
		}
	}
	/*我的九宫格*/
	.u-grid{
		width: auto;
	}
	.my-grid{
		box-sizing: border-box;
		margin: 20rpx;
		background: #fff;
    color: #838184;
		.iconfont{
			font-size: 55rpx;
			margin-bottom: 5px;
		}
		.icon-gerenxinxi1,.icon-icon-test{
			color: #55befd
		}
		.icon-yaoqinghaoyou1{
			color: #f71a61
		}
		.icon-qianbao,.icon-shouyimingxi1{
			color: #ffaa09;
		}
		.icon-bangzhuzhongxin1, .icon-bangzhuzhongxin{
			color: #04baab;
		}
	}
</style>
